<template>
  <div>
    <el-form :inline="true">
      <el-button text type="primary" @click="dialog = true">新增</el-button>
      <el-form-item label="商品名称" style="color: blue;">
        <el-input v-model="ABC.goods_Name" placeholder="请输入商品名称" />
      </el-form-item>

      <el-form-item label="商品规格" style="color: blue;">
        <el-input v-model="ABC.goods_Spec" placeholder="请输入商品规格" />
      </el-form-item>

      <el-form-item label="商品编码" style="color: blue;">
        <el-input v-model="ABC.goods_Code" placeholder="请输入商品编码" />
      </el-form-item>

      <el-form-item label="商品品牌" style="color: blue;">
        <el-input v-model="ABC.goods_Brand" placeholder="请输入商品品牌" />
      </el-form-item>

      <el-form-item label="商品类别" style="color: blue;">
        <el-input v-model="ABC.goods_Category" placeholder="请输入商品类别" />
      </el-form-item>


      <el-button type="primary" @click="GoodsInfoQuery">查询</el-button>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="操作" width="120">
      <template v-slot="scope">
        <!-- <el-button type="text" @click="handleEdit()">编辑</el-button> -->
        <el-button type="text" @click="handleDelete(scope.goods_Id)">删除</el-button>
      </template>
    </el-table-column>
      <el-table-column prop="goods_Id" label="编号"></el-table-column>
      <el-table-column prop="vendor_Name" label="商品供应商"></el-table-column>
      <el-table-column prop="goods_Name" label="商品名称"></el-table-column>
      <el-table-column prop="goods_Grade" label="商品等级"></el-table-column>
      <el-table-column prop="goods_Code" label="商品编码"></el-table-column>
      <el-table-column prop="goods_BarCode" label="商品条码"></el-table-column>
      <el-table-column prop="goods_Spec" label="商品规格"></el-table-column>
      <el-table-column prop="goods_Category" label="商品类别"></el-table-column>
      <el-table-column prop="goods_Brand" label="商品品牌"></el-table-column>
      <el-table-column prop="goods_Origin" label="商品产地"></el-table-column>
      <el-table-column prop="goods_ShelfMonth" label="商品保质期"></el-table-column>
      <el-table-column prop="goods_SellingPrice" label="商品售价"></el-table-column>
      <el-table-column prop="goods_Status" label="商品状态">
        <template v-slot="scope">
          {{ getStatusText(scope.row.goods_Status) }}
        </template>
      </el-table-column>
      <el-table-column prop="goods_Remark" label="备注"></el-table-column>
    </el-table>
    <el-pagination v-model:current-page="ABC.pageIndex" v-model:page-size="ABC.pageSize" :page-sizes="[1, 5, 10, 30]"
      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="ABC.totalCount"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      <!-- 添加 -->
  <!--@vue-ignore-->
  <el-drawer style="width: 700px" v-model="dialog" title="[新增]商品信息" :before-close="handleClose" direction="rtl"
    class="demo-drawer">
    <el-form>
      <el-form-item label="商品供应商ID" :label-width="formLabelWidth">
        <el-input v-model="form.goods_VendorId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品编码" :label-width="formLabelWidth">
        <el-input v-model="form.goods_Code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="form.goods_Name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="等级" :label-width="formLabelWidth">
        <el-input v-model="form.goods_Grade" autocomplete="off" />
      </el-form-item>
      <el-form-item label="类别" :label-width="formLabelWidth">
        <el-select v-model="form.goods_Category" placeholder="请选择" style="width: 240px">
          <el-option v-for="category in categories" :key="category" :value="category">{{ category }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品牌" :label-width="formLabelWidth">
        <el-select v-model="form.goods_Brand" placeholder="请选择" style="width: 240px">
          <el-option v-for="brand in brands" :key="brand" :value="brand">{{ brand }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.goods_Remark" />
      </el-form-item>
      <el-form-item label="商品规格" :label-width="formLabelWidth">
        <el-input v-model="form.goods_Spec"/>
      </el-form-item>
      <el-form-item label="条码" :label-width="formLabelWidth">
        <el-input v-model="form.goods_BarCode"/>
      </el-form-item>
      <el-form-item label="商品产地" :label-width="formLabelWidth">
        <el-input v-model="form.goods_Origin" />
      </el-form-item>
      <el-form-item label="商品保质期" :label-width="formLabelWidth">
        <el-input v-model="form.goods_ShelfMonth"/>
      </el-form-item>
      <el-form-item label="联系人" :label-width="formLabelWidth">
        <el-input v-model="form.goods_ContactPerson" />
      </el-form-item>
      <el-form-item label="联系人电话" :label-width="formLabelWidth">
        <el-input v-model="form.goods_ContactPhone" />
      </el-form-item>
      <el-form-item label="商品售价" :label-width="formLabelWidth">
        <el-input v-model="form.goods_SellingPrice" />
      </el-form-item>
      <el-form-item label="商品单位" :label-width="formLabelWidth">
        <el-input v-model="form.goods_Unit" />
      </el-form-item>
      <el-form-item label="商品重量单位" :label-width="formLabelWidth">
        <el-input v-model="form.goods_WeightUnit" />
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="dialog = false">取消</el-button>
      <el-button type="primary" @click="addTraceability">新增</el-button>
    </div>
  </el-drawer>
  </div>
  
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue';
import type { UploadFile } from 'element-plus'
import { useRouter } from 'vue-router';

// 定义商品状态枚举
const enumGoodsStatus = reactive([
  { value: 0, label: '待处理' },
  { value: 1, label: '待入库' },
  { value: 2, label: '已入库' },
  { value: 3, label: '待出库' },
  { value: 4, label: '已出库' },
]);
//状态
const getStatusText = (status: number): string => {
  switch (status) {
    case 0:
      return '待处理';
    case 1:
      return '待入库';
    case 2:
      return '已入库';
    case 3:
      return '待出库';
    default:
      return '已出库';
  }
}
const grade = ref(['A类', 'B类', 'C类']);
const categories = ref(['类别A', '类别B', '类别C', '类别D', '类别E', '类别F']);
const brands = ref(['品牌A', '品牌B', '品牌C', '品牌D', '品牌E', '品牌F']);

const router = useRouter();
// 商品信息添加
const formLabelWidth = '80px'
// const dialogFormVisible = ref(false)
// let timer


const dialog = ref(false)


const form = reactive({

  goods_VendorId: "",
  goods_Name: "",
  goods_Grade: "",
  goods_Code: "",
  goods_BarCode: "123",
  goods_Spec: "",
  goods_Category: "",
  goods_Brand: "",
  goods_Origin: "",
  goods_ContactPerson: "",
  goods_ContactPhone: "",
  goods_ShelfMonth: "",
  goods_SellingPrice: "",
  goods_Unit: "",
  goods_WeightUnit: "",
  goods_Remark: "",
})



const addTraceability = () => {
  axios.post('http://localhost:5259/api/GoodsCreate/CreateGoods', form)
    .then(response => {
      if (response.data.code === 200) {
        ElMessage.success('添加成功');
        dialog.value = false;
        refreshTableData();
      } else {
        ElMessage.error(response.data.message);
      }
    })
    .catch(error => {
      const errorMessage = error.response?.data?.message || '请求失败，请稍后再试';
      ElMessage.error(errorMessage);
    });
}


const refreshTableData = () => {
  GoodsInfoQuery()
}






//显示
const tableData = ref([])
const ABC = reactive({
  goods_Name: '',
  goods_Spec: '',
  goods_Code: '',
  goods_BarCode: '',
  goods_Brand: '',
  goods_Category: '',
  totalCount: 0,
  totalPage: 0,
  pageIndex: 1,
  pageSize: 10,
})
//显示
const GoodsInfoQuery = () => {
  axios.get('http://localhost:5115/api/GoodsInfo/GetGoodsInfo', {
    params: {
      goods_Name: ABC.goods_Name,
      goods_Spec: ABC.goods_Spec,
      goods_Code: ABC.goods_Code,
      goods_BarCode: ABC.goods_BarCode,
      goods_Brand: ABC.goods_Brand,
      goods_Category: ABC.goods_Category,
      pageIndex: ABC.pageIndex,
      pageSize: ABC.pageSize,
    }
  }).then(res => {
    tableData.value = res.data.data.data
    console.log(res)
    ABC.totalCount = res.data.data.totalCount
    ABC.totalPage = res.data.data.totalPage
  })
}





//删除
const handleDelete = (goods_Id: number) => {
  ElMessageBox.confirm(
    '确定删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    axios.delete("http://localhost:5259/api/GoodsCreate/DeleteGoods?goods_Id=" + goods_Id).then(res => {
      if (res.data.code == 200) {
        ElMessage.success("删除成功")
        GoodsInfoQuery()
      }
      else {
        ElMessage.error(res.data.message)
      }
    })
  })

    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
onMounted(() => {
  GoodsInfoQuery()
})
const handleSizeChange = (val: number) => {
  ABC.pageSize = val
  GoodsInfoQuery()

}
const handleCurrentChange = (val: number) => {
  ABC.pageIndex = val
  GoodsInfoQuery()
}

//编辑
function handleEdit() {

}
</script>

<style>
.input-with-select {
  margin-bottom: 20px;
}
</style>